<template>
	<div>
		<view class="wrap-order-btn-bg flex align-center just-end f-26">
			<view
				class="list-btn one-btn"
				:class="{ 'details-btn four-btn': btnType === 2 }"
				v-if="(dataInfo.status === '-1' || dataInfo.status === '7') && btnType !== 2"
				@click.stop="onDeleteOrder()"
			>
				删除
			</view>

			<view
				class="list-btn one-btn"
				:class="{ 'details-btn four-btn': btnType === 2 }"
				v-if="dataInfo.status === '7' && dataInfo.is_comment != 1 && btnType !== 2"
				@click.stop="onEvaluate()"
			>
				去评价
			</view>

			<view
				class="list-btn one-btn"
				:class="{ 'details-btn four-btn': btnType === 2 }"
				v-if="dataInfo.status === '1'"
				@click.stop="onCancelOrder()"
			>
				取消订单
			</view>

			<view
				class="list-btn two-btn"
				:class="{ 'details-btn three-btn': btnType === 2 }"
				v-if="
					dataInfo.status === '2' ||
					dataInfo.status === '3' ||
					dataInfo.status === '4' ||
					dataInfo.status === '5'
				"
				@click.stop="onApplyRefund()"
			>
				申请退款
			</view>

			<view
				class="list-btn two-btn"
				:class="{ 'details-btn three-btn': btnType === 2 }"
				v-if="dataInfo.status === '6'"
			>
				升级/加钟
			</view>

			<view
				class="list-btn two-btn"
				:class="{ 'details-btn three-btn': btnType === 2 }"
				v-if="dataInfo.status === '7' && dataInfo.is_add == 0"
				@click.stop="oneMoreOrder()"
			>
				再来一单
			</view>

			<view
				class="list-btn two-btn"
				:class="{ 'details-btn three-btn': btnType === 2 }"
				v-if="dataInfo.status === '1'"
				@click.stop="onPayOrder()"
			>
				去支付
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 用户状态 1:普通用户 2:技师
			 */
			userStatus: {
				type: Number,
				default: 1,
			},
			/**
			 * 订单信息
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 按钮类型 1:订单列表 2:订单详情
			 */
			btnType: {
				type: Number,
				default: 1,
			},
		},
		methods: {
			/**
			 * 删除订单
			 */
			onDeleteOrder() {
				this.$filters.onDeleteOrder(this.dataInfo.id, () => {
					this.$emit("onRefresh");
				});
			},
			/**
			 * 去支付
			 */
			onPayOrder() {
				this.$filters.onPayOrder(this.dataInfo.id, () => {
					this.$emit("onRefresh");
				});
			},
			/**
			 * 取消订单
			 */
			onCancelOrder() {
				this.$filters.onCancelOrder(this.dataInfo.id, () => {
					this.$emit("onRefresh");
				});
			},
			/**
			 * 申请退款
			 */
			onApplyRefund() {
				// this.$emit("onApplyRefund", this.dataInfo.id);
			},
			/**
			 * 去评价
			 */
			onEvaluate() {
				// uni.navigateTo({
				// url: `/subPages/technician/recruit/appraise?order_id=${this.dataInfo.id}`,
				// });
			},
			/**
			 * 再来一单
			 */
			oneMoreOrder() {
				// uni.navigateTo({
				// 	url: `/subPages/technician/home/serviceDetail?id=${this.dataInfo.service_id}`,
				// });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-order-btn-bg {
		flex: 1;
		overflow: hidden;

		.list-btn {
			width: 140rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 8rpx;
			overflow: hidden;
			margin-left: 30rpx;

			&:first-child {
				margin-left: 0rpx;
			}
		}

		.details-btn {
			width: 222rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			overflow: hidden;
			margin-left: 22rpx;
			&:first-child {
				margin-left: 0rpx;
			}
		}

		.three-btn {
			background: $grad-theme-color;
			color: $bg-text-color;
		}

		.four-btn {
			border: 2rpx solid $old-price-color;
			color: #b0b0b0;
		}

		.one-btn {
			color: $theme-color;
			border: 2rpx solid $theme-color;
		}
		.two-btn {
			color: $bg-text-color;
			background-color: $theme-color;
		}
	}
</style>
